<template>
	<view>
		<uni-nav-bar title="投放资源列表" right-icon="plus" @click-right="rightAdd"></uni-nav-bar>
		
			<view><mSearch :show="false" radius="5" :placeholder="placeholder" backgroundColor="#EEEEEE"></mSearch></view>

		<view>
			<!-- <view>
				<view class="list-box" style="border-bottom: 1px solid #EEEEEE">
					<view style="width:34%"><image class="bgyi" src="/static/bg01.jpg" mode="scaleToFill" @error="imageError"></image></view>
					<view style="width:58%;">
						<view class="title-row">
							<view style="font-size: 36upx">资源名称</view>
							<view style="font-size: 32upx;color:#999999">审核中</view>
						</view>
						<view style="font-size: 32upx;color:#999999;">所属行业</view>
					</view>
				</view>
				<view class="list-box">
					<view style="width:34%"><image class="bgyi" src="/static/bg01.jpg" mode="scaleToFill" @error="imageError"></image></view>
					<view style="width:58%;">
						<view class="title-row">
							<view style="font-size: 36upx">资源名称</view>
							<view style="font-size: 32upx;color:#999999">审核中</view>
						</view>
						<view style="font-size: 32upx;color:#999999;">所属行业</view>
					</view>
				</view>
			</view> -->
		
			<view style="border:1px solid #999999;border-radius:10upx;margin-top:20upx;background-color: #ffffff;">
				<view class="benner-row">
					<view style="font-size: 32upx">广告资源名称</view>
					<view class="putin-btn">投放中</view>
				</view>
				<view style="width:94%;margin:0 3%;"><image class="bger" src="/static/bg02.jpg" mode="scaleToFill" @error="imageError"></image></view>
				<view class="value-row">
					<view class="value-data">
						<view>123</view>
						<view>播放量</view>
					</view>
					<view class="value-data">
						<view>123</view>
						<view>观看人数</view>
					</view>
					<view class="value-data" style="border:none">
						<view>10%</view>
						<view>转化率</view>
					</view>
				</view>
			</view>

			<view style="border:1px solid #999999;border-radius:10upx;margin-top:40upx;background-color: #ffffff;">
				<view class="benner-row">
					<view style="font-size: 32upx">广告资源名称</view>
					<view class="putin-btn">投放中</view>
				</view>
				<view style="width:94%;margin:0 3%;"><image class="bger" src="/static/bg02.jpg" mode="scaleToFill" @error="imageError"></image></view>
				<view class="value-row">
					<view class="value-data">
						<view>123</view>
						<view>播放量</view>
					</view>
					<view class="value-data">
						<view>123</view>
						<view>观看人数</view>
					</view>
					<view class="value-data" style="border:none">
						<view>10%</view>
						<view>转化率</view>
					</view>
				</view>
			</view>
		
		</view>
		<!-- <view class="go-top"><uni-icon type="arrowup"></uni-icon></view> -->
	</view>
</template>

<script>
import uniIcon from '@/components/uni-icon/uni-icon.vue';
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
import mSearch from '@/components/mehaotian-search/mehaotian-search.vue';
export default {
	components: { uniNavBar, uniIcon, mSearch },
	data() {
		return {
			placeholder: '请输入搜索内容'
		};
	},
	methods: {
		rightAdd() {
			uni.navigateTo({
				url: 'addResources'
			});
		},
		search(e, val) {
			console.log(e, val);
			this['val' + val] = e;
		},
		imageError: function(e) {
			console.error('image发生error事件，携带值为' + e.detail.errMsg);
		}
	}
};
</script>

<style>
page{
	background-color:lightgray;
}
.list-box {
	display: flex;
	flex-direction: row;
	/* margin: 20upx 0; */
}
.bgyi {
	width: 200upx;
	height: 200upx;
	margin: 20upx;
}
.title-row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	height: 120upx;
	align-items: center;
}
.benner-row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	height: 68upx;
	align-items: center;
	margin: 0 20upx;
}
.putin-btn {
	font-size: 28upx;
	color: orange;
	padding: 2upx 14upx;
	border: 1px solid #999999;
	height: 40upx;
	border-radius: 8upx;
}
.value-row {
	display: flex;
	flex-direction: row;
	margin-top: 20upx;
	border-top: 1px solid #999999;
	/* justify-content: space-around; */
	font-size: 32upx;
	align-items: center;
	text-align: center;
}
.value-data {
	width: 33%;
	border-right: 1px solid #999;
	height: 88upx;
	margin: 16upx 0;
}
.bger {
	width: 100%;
	height: 340upx;
}
.go-top {
	border-radius: 6upx;
	background: #999999;
	height: 68upx;
	width: 68upx;
	position: absolute;
	right: 0;
	bottom: 32upx;
	z-index: 100;
	text-align: center;
	color: #ffffff;
	opacity: 0.6;
}
</style>
